<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>智能产品</title>
  <link rel="stylesheet" href="./static/muse-ui.css">
  <link rel="stylesheet" href="./static/register.css">
  <link rel="stylesheet" href="./static/indu.css">

  <script src="./static/vue.js"></script>
  <script src="./static/muse-ui.js"></script>
  <script src="./js/axios.js"></script>
  <script src="./static/smsCode.js"></script>
  <script src="./static/jquery.min.js"></script>
  <script src="./static/layer/layer.js" type="text/javascript"></script>
  <style type="text/css">
    .sms-code {
      position: relative;
      width: 100%;
    }
    .indu{
      background-color: #FAFAFA;
    }
    .indu-wapper{
      display: flex;
      flex-direction: column;
    }
    .indu-left img{
      width: 90px;
      height: 90px;
      border-radius: 3px;
    }
    .indu-item{
      display: flex;
      flex-direction: row;
      background-color: #ffffff;
      border-radius: 10px;
      padding: 17px 14px 5px 14px;
         margin: 11px 11px 0 11px;

box-shadow: 0px 2px 8px 0px #DDDFEB;
    }
    .indu-right{
      padding: 0 9px 8px 15px;
      width: 100%;
    }
    .indu-title{
      font-size: 15px;
      color: #30344C;
      font-weight: bold;
      margin-bottom: 5px;
      
    }
    .indu-text{

      color:#86868B;
       text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
    }
    .indu-but{
          margin: 0 0 0 auto;
      width: 78px;
    height: 30px;
    background: #004299;
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    color: #ffffff;
    margin-top: 10px;
    }
    .pop-alter{
      background-color: #ffffff;
      margin: 0 15px;
      height: 490px;
          width: 100%;
              z-index: 99;
              border-radius: 10px;
    }
    .pop{
   display: flex;
    align-items: center;
    justify-content: center;
  height: 600px;
  position: fixed;
    top: 0;
    left: 0;
    right: 0;
    }
    .pop-title{
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #30344C;
      border-radius: 10px;
      margin-top: 25px;
    }
    .mu-form-item .mu-input{
          background-color: rgba(187, 187, 187, 0.1);
    font-size: 12px;
    padding: 5px;
    border-radius: 3px;
    }
    .mu-form-item{
      margin-bottom: 0;
    }
    .mu-input-line{
      display: none;
    }
    .pop-but{
      width: 241px;
    height: 38px;
    background: #004299;
    border-radius: 20px;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
    color: #ffffff;
    margin-top: 10px;
    margin: auto;
    }
    .pop-bg{
          width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    }
    .cuo img{
      width: 21px;
      height: 21px;
      position: fixed;
    top: 80px;
    z-index: 999;
    right: 35px;
    }
  </style>
</head>

<body>
  <div class="regist" id="app">
   <div class="indu">
     <div class="indu-wapper">
       <div class="indu-item" v-for="(item,index) in productList">
         <div class="indu-left">
           <!-- <img :src="item.images[0]"/> -->
            <img :src='item.cover'>
         </div>
         <div class="indu-right">
           <div class="indu-title">{{item.title}}</div>
           <div class="indu-text">{{item.describes}}</div>
           <div class="indu-but" @click="hanldInfo(item.id)">查看更多</div>
         </div>
       </div>

     </div>
   </div>


  </div>
  <script src="./static/jigsaw.min.js" type="text/javascript"></script>
  <script>
    Vue.use(MuseUI)
    var url = 'http://saibocp.cyber-mi.com/'
    var regist = new Vue({
      el: '#app',
      methods: {
         //获取产品列表
        product: function () {
          let that = this;
          $.ajax({
            type: "GET",
            url: `${that.url}other/product`,
            dataType: 'json',
            success: function (result) {
              if(result.code==0){
                that.productList = result.msg.data;
              } else {
                layer.msg('网络错误')
              }
            }
          });
        },
        hanldClose(){
          this.pop = false;
        },
        hanldOpen(){
          this.pop = true;
        },
        hanldInfo(id){
          let that = this;
          console.log('我点击了')

          console.log(id)
          window.location.href = `controller.html?name=${id}`;
        },
        // 手机验证码
        getCode() {
          const formData = {
            type: '0',
            mobile: this.validateForm.mobile,
          }
          if (!(/^[1][3-9][0-9]{9}$/.test(this.validateForm.mobile))) {
            alert("请输入正确的手机号！");
            return
          } else {
            let data = {
              code: 'reg',
              method: 'user.sms',
              mobile: this.validateForm.mobile,
            };

            //发送短信
            axios.post(url, data).then(res => {
              alert(res.data.msg)
            })
          }

          this.canSend = true;
          this.startTime = new Date().getTime();
          localStorage.setItem('SMSCodeStratTime', this.startTime);
          this.sending();
        },
        sending() {
          //验证码倒计时
          let app = this;
          let now = new Date().getTime();
          let time = Math.round((now - app.startTime) / 1000);
          app.codeMsg = `稍等${app.time - time}秒`
          if (time >= app.time) {
            app.canSend = false;
            app.startTime = null;
            app.timer = null;
            app.codeMsg = `获取验证码`
            localStorage.removeItem('SMSCodeStratTime')
          } else {
            app.timer = setTimeout(function () {
              app.sending();
            }, 1000)
          }
        },

        //注册
        regist: function () {
          let app = this;
          $.ajax({
            url: url,
            dataType: 'json',
            type: 'POST',
            data: {
              method: 'user.smslogin',
              mobile: app.validateForm.mobile,
              password: app.validateForm.password,
              code: app.validateForm.smscode,
              invitecode: app.validateForm.invitecode
            },
            success: function (r) {
              if (r.status) {
                layer.msg('注册成功');
                window.location.href = 'https://fir.im/4c1a';
              } else {
                layer.msg(r.msg);
              }
            }
          })
        },
          
      },
      data: function () {
        return {
          url:'http://saibocp.cyber-mi.com/',
          productList:"",
          newPdList:"",
          value9:"",
          pop:false,
          show: false,
          opens: false,
          codeMsg: '获取验证码',
          canSend: false,
          timer: null,
          startTime: null,
          time: 60, //倒计时60秒
          validateForm: {
            mobile: "",//手机号码
            smscode: "",//手机验证码
            password: '',//登录密码
            tradepassword: '',//交易密码
            invitecode: '',//邀请码
          },
          mobileRules: [
            { validate: val => !!val, message: "请输入手机号码" },
            {
              validate: val => /^[1][3-9][0-9]{9}$/.test(val),
              message: "请输入正确的手机号码"
            }
          ],
          passwordRules: [
            { validate: val => !!val, message: "请输入登录密码" },
            {
              validate: val => val.length >= 6 && val.length <= 20,
              message: "登录密码长度大于等于6小于等于20"
            }
          ],
          tradeRules: [
            { validate: val => !!val, message: "请输入交易密码" },
            {
              validate: val => /^[0-9]{6}$/.test(val),
              message: "交易密码为6位数字"
            }
            //	        {
            //	          validate: val => val.length == 6 ,
            //	          message: "交易密码长度等于6"
            //	        }
          ],
          smscodeRules: [{ validate: val => !!val, message: "请输入验证码" }],
          invitecodeRules: [{ validate: val => !!val, message: "请输入邀请码" }],
        }
      },
      mounted(){
      },
      created() {

          this.product()
        let search = window.location.search
        search = search.substr(1, search.length - 1);
        let id = search.split('=')[1];
        if (id) {
          this.validateForm.invitecode = id;
        }
      },

    });

  </script>
</body>

</html>